<template>
  <div class="buy-page">
    <navigation-bar pageName='立即购买'
                    @onLeftClick='onLeftClick'>
    </navigation-bar>
    <!-- 内容区 -->
    <div class="buy-page-content">
      <!-- 展示购买的商品 -->
      <div class="buy-page-content-goods">
        <!-- 支付方式图片 -->
        <img :src="goodsData.img"
             class="buy-page-content-goods-img">
        <!-- 支付方式描述 -->
        <div class="buy-page-content-goods-desc">
          <p class="buy-page-content-goods-desc-name">{{goodsData.name}}</p>
          <p class="buy-page-content-goods-desc-price">¥{{goodsData.price | priceFilter}}</p>
        </div>
      </div>
      <!-- 支付方式 -->
      <ul class="buy-page-content-list">
        <li class="buy-page-content-list-item"
            v-for="(item,index) in paymentDatas"
            :key='index'
            @click="onItemClick(index)">
          <!-- 支付方式图片 -->
          <img :src="item.icon"
               class="buy-page-content-list-item-icon">
          <!-- 支付方式描述 -->
          <div class="buy-page-content-list-item-desc">
            <!-- 支付方式名称 -->
            <p class="buy-page-content-list-item-desc-name">{{item.name}}</p>
            <p class="buy-page-content-list-item-desc-desc">{{item.desc}}</p>
          </div>
          <!-- 选中标记图片 -->
          <img :src="getCheckIcon(item.id === selectPayment.id)"
               class="buy-page-content-list-item-desc-check">
        </li>
      </ul>
    </div>
    <!-- 立即购买 -->
    <div class="pay page-commit">
      立即购买
    </div>
  </div>
</template>
<script>
import NavigationBar from '@c/currency/NavigationBar.vue'
export default {
  data () {
    return {
      /*
        商品数据源
      */
      goodsData: {},
      paymentDatas: [
        {
          id: '1',
          name: '支付宝支付',
          desc: '数亿用户都在用，安全可信托',
          icon: require('@img/alipay.svg')
        },
        {
          id: '2',
          name: '微信支付',
          desc: '亿万用户选择，更快更安全',
          icon: require('@img/weichat.png')
        }
      ],
      // 用户选中的支付方式
      selectPayment: {}
    }
  },
  created: function () {
    this.selectPayment = this.paymentDatas[0]
    this.goodsId = this.$route.query.id
    this.loadGoodsData()
  },
  components: {
    NavigationBar
  },
  methods: {
    onLeftClick () {
      this.$router.go(-1)
    },
    loadGoodsData: function () {
      this.$http('/goodsDetail', {
        params: {
          goodsId: this.goodsId
        }
      }).then(res => {
        this.goodsData = res.data.goodsData
      })
    },
    onItemClick (index) {
      this.selectPayment = this.paymentDatas[index]
    },
    getCheckIcon (isCheck) {
      return isCheck ? require('@img/check.svg') : require('@img/no-check.svg')
    }
  }
}
</script>
<style scoped lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.buy-page {
  height: 100%;
  width: 100%;
  position: absolute;
  background: $bgColor;
  display: flex;
  flex-direction: column;
  &-content {
    overflow: hidden;
    height: 100%;
    &-goods {
      background: white;
      padding: px2rem($marginSize);
      display: flex;
      border-bottom: px2rem(1) solid $lineColor;
      border-top: px2rem(1) solid $lineColor;
      margin-top: px2rem($marginSize);
      &-img {
        width: px2rem(100);
        height: px2rem(100);
      }
      &-desc {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 px2rem($marginSize);
        &-name {
          font-size: px2rem($infoSize);
          line-height: px2rem(18);
        }
        &-price {
          font-size: px2rem($titleSize);
          color: $MainColor;
          font-weight: 500;
        }
      }
    }
    &-list {
      margin-top: px2rem($marginSize);
      &-item {
        display: flex;
        background: white;
        border-bottom: px2rem(1) solid $lineColor;
        padding: px2rem($marginSize);
        align-items: center;
        &-icon {
          height: px2rem(30);
        }
        &-desc {
          margin-left: px2rem(12);
          flex-grow: 1;
          &-name {
            font-size: px2rem($infoSize);
          }
          &-desc {
            font-size: px2rem($minSize);
            margin-top: px2rem(6);
            color: $lineColor;
          }
          &-check {
            width: px2rem(30);
            height: px2rem(30);
          }
        }
      }
    }
  }
  .pay {
    box-shadow: 0 0 px2rem(16) 0 rgba(0, 0, 0, 0.2);
    margin-bottom: px2rem(52);
  }
}
</style>